<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '12px' }">
        <chart-card :loading="contractMoneyChart.loading" title="本年销售额" :total="'￥' + contractMoneyChart.moneyThisYear">
          <a-tooltip title="本年销售合同总额" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend :flag="contractMoneyChart.flagYear" style="margin-right: 16px;">
              <span slot="term">同比</span>
              {{contractMoneyChart.rateYear}}
            </trend>
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="contractMoneyChart.loading" title="本月销售额" :total="'￥' + contractMoneyChart.moneyThisMonth">
          <a-tooltip title="本月销售合同总额" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend :flag="contractMoneyChart.flagMonth" style="margin-right: 16px;">
              <span slot="term">同比</span>
              {{contractMoneyChart.rateMonth}}
            </trend>
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="projectCountChart.loading" title="新增项目" :total="projectCountChart.sumCount">
          <a-tooltip title="本年新增项目个数" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area ref="projectMiniArea" y="项目数" :data-source="projectCountChart.monthCountList"/>
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="customerCountChart.loading" title="新增客户" :total="customerCountChart.sumCount">
          <a-tooltip title="本年新增客户个数" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-bar ref="customerMiniBar" y="客户数" :y-max="Number(customerCountChart.sumCount)" :data-source="customerCountChart.monthCountList" :height="50"/>
          </div>
        </chart-card>
      </a-col>
    </a-row>

    <a-row :gutter="24" style="margin-bottom: 20px" type="flex">
      <a-col :span="15" >
        <a-card :loading="contractMoneyMonthChart.loading" :bordered="false" :body-style="{padding: '0'}" title="销售统计" style="height: 385px">
            <index-bar y="合同金额" :data-source="contractMoneyMonthChart.monthPriceList"/>
        </a-card>
      </a-col>
      <a-col :span="9">
        <a-card :loading="projectTable.loading" :bordered="false" :body-style="{padding: '0'}" title="项目列表" style="height: 385px">
          <a-table :dataSource="projectTable.dataSource"
                   size="middle"
                   rowKey="id"
                   :scroll="{x:0,y:230}"
                   :columns="projectTable.columns"
                   :pagination="projectTable.ipagination"
                   @change="projectTableChange">

            <template slot="projectName" slot-scope="text, record">
              <j-ellipsis :value="text" :length="7"/>
            </template>
            <template slot="customerId_dictText" slot-scope="text, record">
              <j-ellipsis :value="text" :length="7"/>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
    <a-row>
      <a-card :bordered="false" :body-style="{padding: '0'}">
        <div class="salesCard">
          <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
<!--            <div class="extra-wrapper" slot="tabBarExtraContent">-->
<!--              <div class="extra-item">-->
<!--                <a>今日</a>-->
<!--                <a>本周</a>-->
<!--                <a>本月</a>-->
<!--                <a>本年</a>-->
<!--              </div>-->
<!--              <a-range-picker :defaultValue="today" :style="{width: '256px'}" />-->
<!--            </div>-->
            <a-tab-pane loading="true" tab="采购订单" key="1">
              <a-table :dataSource="purOrderTable.dataSource"
                       size="middle"
                       rowKey="id"
                       :scroll="{x:0,y:230}"
                       :columns="purOrderTable.columns"
                       :pagination="purOrderTable.ipagination"
                       @change="purOrderTableChange">

                <template slot="projectId_dictText" slot-scope="text, record">
                  <j-ellipsis :value="text" :length="12"/>
                </template>
                <template slot="supplyId_dictText" slot-scope="text, record">
                  <j-ellipsis :value="text" :length="12"/>
                </template>
              </a-table>
            </a-tab-pane>
            <a-tab-pane tab="销售订单" key="2">
              <a-table :dataSource="salesOrderTable.dataSource"
                       size="middle"
                       rowKey="id"
                       :scroll="{x:0,y:230}"
                       :columns="salesOrderTable.columns"
                       :pagination="salesOrderTable.ipagination"
                       @change="salesOrderTableChange">

                <template slot="projectId_dictText" slot-scope="text, record">
                  <j-ellipsis :value="text" :length="12"/>
                </template>
                <template slot="customerId_dictText" slot-scope="text, record">
                  <j-ellipsis :value="text" :length="12"/>
                </template>
                <template slot="contractNo" slot-scope="text, record">
                  <j-ellipsis :value="text" :length="12"/>
                </template>
              </a-table>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-card>
    </a-row>


  </div>
</template>

<script>

  import ACol from "ant-design-vue/es/grid/Col"
  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
  import ChartCard from '@/components/ChartCard'
  import MiniBar from '@/components/chart/MiniBar'
  import MiniArea from '@/components/chart/MiniArea'
  import IndexBar from '@/components/chart/IndexBar'
  import BarMultid from '@/components/chart/BarMultid'
  import DashChartDemo from '@/components/chart/DashChartDemo'
  import Trend from '@/components/Trend'
  import {getAction} from "@/api/manage";
  import {numberFormat} from "@/utils/util";
  import moment from "moment";

  let projectDataTemplate = [
    {projectName:"项目一",customerId_dictText:"客户一",amount:'260000',projectDate:"2019-01-22"},
    {projectName:"项目二",customerId_dictText:"客户二",amount:'358000',projectDate:"2020-05-09"},
    {projectName:"项目三",customerId_dictText:"客户三",amount:'140000',projectDate:"2021-12-23"},
    {projectName:"项目四",customerId_dictText:"客户四",amount:'558000',projectDate:"2022-02-18"},
    {projectName:"项目五",customerId_dictText:"客户五",amount:'920000',projectDate:"2022-07-30"},
    {projectName:"项目六",customerId_dictText:"客户六",amount:'130000',projectDate:"2023-03-05"},
    {projectName:"项目七",customerId_dictText:"客户七",amount:'750000',projectDate:"2023-06-19"}];

  let purOrderDataTemplate = [
    {orderNo:"001",supplyId_dictText:"供应商一",totalPrice:'12300',orderDate:"2019-01-22",projectId_dictText:"项目一",buyer_dictText:"采购员一",status_dictText:"新建"},
    {orderNo:"002",supplyId_dictText:"供应商二",totalPrice:'45000',orderDate:"2020-12-30",projectId_dictText:"项目一",buyer_dictText:"采购员二",status_dictText:"采购"},
    {orderNo:"003",supplyId_dictText:"供应商三",totalPrice:'79500',orderDate:"2022-08-15",projectId_dictText:"项目二",buyer_dictText:"采购员三",status_dictText:"完成"},];

  let salesOrderDataTemplate = [
    {orderNo:"001",customerId_dictText:"客户一",orderDate:"2019-01-22",deliveryDate:"2019-01-22",projectId_dictText:"项目一",salesman_dictText:"销售员一",status_dictText:"新建",contractNo:"ct001"},
    {orderNo:"002",customerId_dictText:"客户二",orderDate:"2020-12-30",deliveryDate:"2019-01-22",projectId_dictText:"项目一",salesman_dictText:"销售员二",status_dictText:"采购",contractNo:"ct002"},
    {orderNo:"003",customerId_dictText:"客户三",orderDate:"2022-08-15",deliveryDate:"2019-01-22",projectId_dictText:"项目二",salesman_dictText:"销售员三",status_dictText:"完成",contractNo:"ct003"},];

  export default {
    name: "IndexBbc",
    components: {
      ATooltip,
      ACol,
      ChartCard,
      MiniArea,
      MiniBar,
      DashChartDemo,
      BarMultid,
      IndexBar,
      Trend
    },
    data() {
      return {
        loading: false,
        url:{
          contractMoney: "/sd/contract/queryPriceStatFp",
          projectStat: "/quote/project/queryCountStatFp",
          customerStat: "/mdm/customer/queryCountStatFp",
          contractMonthStat: "/sd/contract/queryMonthPriceStatFp",
          projectList: "/quote/project/queryListFp",
          purOrderList: "/mm/purchaseOrder/queryListFp",
          salesOrderList: "/sd/salesOrder/queryListFp",
        },
        contractMoneyChart:{
          loading: false,
          moneyThisYear: 0,
          moneyThisMonth: 0,
          rateYear: '100%',
          rateMonth: '100%',
          flagYear: 'up',
          flagMonth: 'up',
        },
        contractMoneyMonthChart:{
          loading: false,
          monthPriceList:[],
        },
        customerCountChart:{
          loading: false,
          sumCount: '0',
          monthCountList:[],
        },
        projectCountChart:{
          loading: false,
          sumCount: '0',
          monthCountList:[],
        },
        projectTable:{
          loading: false,
          dataSource: [],
          columns: [{
            title: '项目',
            align:"center",
            dataIndex: 'projectName',
            scopedSlots: { customRender: 'projectName' }
          },{
            title: '客户',
            align:"center",
            dataIndex: 'customerId_dictText',
            scopedSlots: { customRender: 'customerId_dictText' }
          },{
            title: '金额',
            align:"center",
            dataIndex: 'amount'
          },{
            title: '日期',
            align:"center",
            dataIndex: 'projectDate'
          }],
          ipagination:{
            current: 1,
            pageSize: 5,
            pageSizeOptions: ['5','10', '20', '30'],
            showTotal: (total, range) => {
              return "共" + total + "条"
            },
            showQuickJumper: false,
            showSizeChanger: true,
            total: 0,
          },
        },
        purOrderTable:{
          loading: false,
          dataSource: [],
          columns: [{
            title: '订单编号',
            align:"center",
            dataIndex: 'orderNo',
          },{
            title: '供应商',
            align:"center",
            dataIndex: 'supplyId_dictText',
            scopedSlots: { customRender: 'supplyId_dictText' }
          },{
            title: '订单日期',
            align:"center",
            dataIndex: 'orderDate'
          },{
            title: '项目',
            align:"center",
            dataIndex: 'projectId_dictText',
            scopedSlots: { customRender: 'projectId_dictText' }
          },{
            title: '金额',
            align:"center",
            dataIndex: 'totalPrice'
          },{
            title: '采购员',
            align:"center",
            dataIndex: 'buyer_dictText',
          },{
            title: '状态',
            align:"center",
            dataIndex: 'status_dictText',
          }],
          ipagination:{
            current: 1,
            pageSize: 5,
            pageSizeOptions: ['5','10', '20', '30'],
            showTotal: (total, range) => {
              return "共" + total + "条"
            },
            showQuickJumper: false,
            showSizeChanger: true,
            total: 0,
          },
        },
        salesOrderTable:{
          loading: false,
          dataSource: [],
          columns: [{
            title: '订单编号',
            align:"center",
            dataIndex: 'orderNo',
          },{
            title: '客户',
            align:"center",
            dataIndex: 'customerId_dictText',
            scopedSlots: { customRender: 'customerId_dictText' }
          },{
            title: '合同号',
            align:"center",
            dataIndex: 'contractNo',
            scopedSlots: { customRender: 'contractNo' }
          },{
            title: '订单日期',
            align:"center",
            dataIndex: 'orderDate'
          },{
            title: '交货日期',
            align:"center",
            dataIndex: 'deliveryDate'
          },{
            title: '项目',
            align:"center",
            dataIndex: 'projectId_dictText',
            scopedSlots: { customRender: 'projectId_dictText' }
          },{
            title: '销售员',
            align:"center",
            dataIndex: 'salesman_dictText',
          },{
            title: '状态',
            align:"center",
            dataIndex: 'status_dictText',
          }],
          ipagination:{
            current: 1,
            pageSize: 5,
            pageSizeOptions: ['5','10', '20', '30'],
            showTotal: (total, range) => {
              return "共" + total + "条"
            },
            showQuickJumper: false,
            showSizeChanger: true,
            total: 0,
          },
        },
        ipagination1:{
          current: 1,
          pageSize: 5,
          pageSizeOptions: ['5','10', '20', '30'],
          showTotal: (total, range) => {
            return "共" + total + "条"
          },
          showQuickJumper: false,
          showSizeChanger: true,
          total: 0,
        },
        ipagination2:{
          current: 1,
          pageSize: 5,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0,
        },
      }
    },
    methods:{
      goPage(){
        this.$message.success("根据业务自行处理跳转页面!")
      },
      projectTableChange(pagination){
        this.projectTable.ipagination = pagination
        this.loadProjectListData();
      },
      purOrderTableChange(pagination){
        this.purOrderTable.ipagination = pagination
        this.loadPurOrderListData();
      },
      salesOrderTableChange(pagination){
        this.salesOrderTable.ipagination = pagination
        this.loadSalesOrderListData();
      },
      // 加载销售合同统计数据
      loadContractMoneyChartData(){
        this.contractMoneyChart.loading = true
        getAction(this.url.contractMoney).then(res => {
          let { result } = res
          if (result && result.money_this_year) {
            this.contractMoneyChart.moneyThisYear = numberFormat(result.money_this_year);
            this.contractMoneyChart.moneyThisMonth = numberFormat(result.money_this_month);
            if(result.money_last_year != 0){
              let tempMoney = this.$math.subtract(result.money_this_year, result.money_last_year);
              let tempRate = this.$math.round(this.$math.divide(this.$math.multiply(tempMoney, 100), result.money_last_year));
              if(tempRate < 0){
                this.contractMoneyChart.flagYear = 'down';
                tempRate = this.$math.multiply(tempRate, -1);
              }
              this.contractMoneyChart.rateYear = tempRate + '%';
            }
            if(result.money_last_month != 0){
              let tempMoney = this.$math.subtract(result.money_this_month, result.money_last_month);
              let tempRate = this.$math.round(this.$math.divide(this.$math.multiply(tempMoney, 100), result.money_last_month));
              if(tempRate < 0){
                this.contractMoneyChart.flagMonth = 'down';
                tempRate = this.$math.multiply(tempRate, -1);
              }
              this.contractMoneyChart.rateMonth = tempRate + '%';
            }
          }
        }).finally(() => {
          this.contractMoneyChart.loading = false
        })
      },
      // 加载合同月度金额统计数据
      loadContractMoneyMonthChartData(){
        this.contractMoneyMonthChart.loading = true
        getAction(this.url.contractMonthStat).then(res => {
          let { result } = res
          if (result) {
            this.contractMoneyMonthChart.monthPriceList = result;
          }
        }).finally(() => {
          this.contractMoneyMonthChart.loading = false
        })
      },
      // 加载客户统计数据
      loadCustomerCountChartData(){
        this.customerCountChart.loading = true
        getAction(this.url.customerStat).then(res => {
          let { result } = res
          if (result) {
            this.customerCountChart.sumCount = result.sumCount + '';
            this.customerCountChart.monthCountList = result.monthCountList;
          }
        }).finally(() => {
          this.customerCountChart.loading = false
        })
      },
      // 加载项目统计数据
      loadProjectCountChartData(){
        this.projectCountChart.loading = true
        getAction(this.url.projectStat).then(res => {
          let { result } = res
          if (result) {
            this.projectCountChart.sumCount = result.sumCount + '';
            this.projectCountChart.monthCountList = result.monthCountList;
          }
        }).finally(() => {
          this.projectCountChart.loading = false
        })
      },
      // 加载项目列表
      loadProjectListData(){
        let params = {pageNo : this.projectTable.ipagination.current, pageSize : this.projectTable.ipagination.pageSize}
        this.projectTable.loading = true;
        getAction(this.url.projectList, params).then((res) => {
          if (res.success) {
            this.projectTable.dataSource = res.result.records||res.result;
            if(!this.projectTable.dataSource || this.projectTable.dataSource.length == 0){
              this.projectTable.dataSource = projectDataTemplate
            }
            if(res.result.total)
            {
              this.projectTable.ipagination.total = res.result.total;
            }else{
              this.projectTable.ipagination.total = 0;
            }
          }else{
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.projectTable.loading = false
        })
      },
      // 加载采购订单列表
      loadPurOrderListData(){
        let params = {pageNo : this.purOrderTable.ipagination.current, pageSize : this.purOrderTable.ipagination.pageSize}
        this.purOrderTable.loading = true;
        getAction(this.url.purOrderList, params).then((res) => {
          if (res.success) {
            this.purOrderTable.dataSource = res.result.records||res.result;
            if(!this.purOrderTable.dataSource || this.purOrderTable.dataSource.length == 0){
              this.purOrderTable.dataSource = purOrderDataTemplate
            }
            if(res.result.total)
            {
              this.purOrderTable.ipagination.total = res.result.total;
            }else{
              this.purOrderTable.ipagination.total = 0;
            }
          }else{
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.purOrderTable.loading = false
        })
      },
      // 加载销售订单列表
      loadSalesOrderListData(){
        let params = {pageNo : this.salesOrderTable.ipagination.current, pageSize : this.salesOrderTable.ipagination.pageSize}
        this.salesOrderTable.loading = true;
        getAction(this.url.salesOrderList, params).then((res) => {
          if (res.success) {
            this.salesOrderTable.dataSource = res.result.records||res.result;
            if(!this.salesOrderTable.dataSource || this.salesOrderTable.dataSource.length == 0){
              this.salesOrderTable.dataSource = salesOrderDataTemplate
            }
            if(res.result.total)
            {
              this.salesOrderTable.ipagination.total = res.result.total;
            }else{
              this.salesOrderTable.ipagination.total = 0;
            }
          }else{
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.salesOrderTable.loading = false
        })
      },
    },
    computed:{
      today: function(){
        return moment(new Date());
      }
    },
    created() {
      this.loadContractMoneyChartData();
      this.loadContractMoneyMonthChartData();
      this.loadCustomerCountChartData();
      this.loadProjectCountChartData();
      this.loadProjectListData();
      this.loadPurOrderListData();
      this.loadSalesOrderListData();
    }
  }
</script>

<style lang="less" scoped>
 /deep/ .ant-table-body{
   min-height: 230px;
 }
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .item-group {
    padding: 20px 0 8px 24px;
    font-size: 0;
    a {
      color: rgba(0, 0, 0, 0.65);
      display: inline-block;
      font-size: 14px;
      margin-bottom: 13px;
      width: 25%;
    }
  }

  .item-group {
    .more-btn {
      margin-bottom: 13px;
      text-align: center;
    }
  }

  .list-content-item {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: 40px;
  }

  @media only screen and (min-width: 1600px) {
    .list-content-item{
      margin-left:60px;
    }
  }

  @media only screen and (max-width: 1300px) {
    .list-content-item{
      margin-left:20px;
    }
    .width-hidden4{
      display:none
    }
  }
  .list-content-item{
    span{line-height: 20px;}
  }
  .list-content-item{
    p{margin-top: 4px;margin-bottom:0;line-height:22px;}
  }
  .anty-list-cust {
    .ant-list-item-meta{flex: 0.3 !important;}
  }
  .anty-list-cust {
    .ant-list-item-content{flex:1 !important; justify-content:flex-start !important;margin-left: 20px;}
  }
</style>